<template>
    <div>
       <el-row :gutter="20" class="mgb20">
           <el-col :span="6">
               <el-card>
                   <div class="grid-content">
                        <div>{{consumerCount}}</div>
                        <div>用户总数</div>
                   </div>  
               </el-card>
           </el-col>
           <el-col :span="6">
               <el-card>
                   <div class="grid-content">
                        <div>{{singerCount}}</div>
                        <div>歌手总数</div>
                   </div>  
               </el-card>
           </el-col>
           <el-col :span="6">
               <el-card>
                   <div class="grid-content">
                        <div>{{songCount}}</div>
                        <div>歌曲总数</div>
                   </div>  
               </el-card>
           </el-col>
           <el-col :span="6">
               <el-card>
                   <div class="grid-content">
                        <div>{{songListCount}}</div>
                        <div>歌单总数</div>
                   </div>  
               </el-card>
           </el-col>
       </el-row>
    </div>

</template>


<script>
    import {getAllConsumer,getAllSongs,getAllSinger,getAllSongList} from '../api/index'
    export default {
        data () {
            return {
                consumerCount: 0,
                songCount: 0,
                singerCount: 0,
                songListCount: 0,
                consumers: [],
                songs: [],
                singers: [],
                songLists: [],
                consumerSex:{
                    columns: ['性别','总数'],
                    rows: [
                        {'性别':'男','总数':0},
                        {'性别':'女','总数':0}
                    ]
                }
            }
        },

        mounted () {
            this.getAllConsumer();
            this.getAllSongs();
            this.getAllSinger();
            this.getAllSongList();
        },

        methods: {
            getAllConsumer () {
                getAllConsumer()
                    .then(res => {
                        this.consumers = res;
                        this.consumerCount = res.length
                    })
            },
            getAllSongs () {
                getAllSongs()
                    .then(res => {
                        this.songs = res
                        this.songCount = res.length
                    })
            },
            getAllSinger () {
                getAllSinger()
                    .then(res => {
                        this.singers = res
                        this.singerCount = res.length
                    })
            },
            getAllSongList () {
                getAllSongList()
                    .then(res => {
                        this.songLists = res
                        this.songListCount = res.length
                    })
            },


            setSex (sex,consumer) {
                let count = 0;
                for(let item of consumer) {
                    if(sex === item.sex) {
                        count++;
                    }
                }
                return count;
            }
        }
    }
</script>


<style lang="less" scoped>
    .grid-content{
        height: 50px;
        font-size: 27px;
        color: darkgray;
        div{
            width: 100%;
            text-align: center;
        }
        div:nth-child(2) {
            margin-top: 5px;
            font-size: 13px;
        }
    }
</style>